<template>
  <nav-bar>
    <div slot="left" class="backBtn" @click="backClick">
      <img src="~assets/img/common/back.svg" alt="">
    </div>
    <div slot="center" class="title-box">
      <div class="title-item" :class='{ active: currentIndex==index }' v-for='(item,index) in titles' :key='index' @click='navbarclick(index)'>{{ item }}</div>
    </div>
  </nav-bar>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
export default {
  name: "DetailNavBar",
  props:{
    titles: {
      type: Array,
      default(){
        return []
      }
    }
  },
  data(){
    return{
      currentIndex: 0
    }
  },
  components: {
    NavBar,
  },
  methods:{
    navbarclick(index){
      this.currentIndex = index
      this.$emit('titleClick',index)
    },
    backClick(){
      this.$router.go(-1)
    }
  }
};
</script>

<style scoped>
.backBtn img{
  margin-top: 17px;
  width: 18px;
}
.title-box {
  display: flex;
}
.title-box .title-item{
  flex:1;
} 
.active {
  color: var(--color-high-text)
}
</style>